<script type="text/x-template" id="cc-header-url-tabs">
    <div style="margin-left: 10px">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="请求头信息" name="header">
                <cc-key-value :data="header"
                              @data-change="handleHeaderChange"
                />
            </el-tab-pane>
            <el-tab-pane label="请求url参数" name="param">
                <cc-key-value :data="param" @data-change="handleParamChange"
                />
            </el-tab-pane>
        </el-tabs>
    </div>
</script>

<script>
    Vue.component('cc-header-url-tabs', {
        template: '#cc-header-url-tabs',
        data() {
            return {

            }
        },
        props: {
            activeTab: {
                type: String,
                default: "header"
            },
            header: {
                type: String,
                default: ""
            },
            param: {
                type: String,
                default: ""
            }
        },
        computed: {},
        methods: {
            handleHeaderChange(data){
                this.header = data;
                this.$emit('header-change', this.header)
            },
            handleParamChange(data){
                this.param = data;
                this.$emit('param-change', this.param)
            },

        },
        created() {

        }
    })
</script>
